<template>
    <el-container style="height: 100%;" class="mainNotitle">
        <el-aside class="side" style="padding-top: 6px;">
            <sideLeft class="nodrag"></sideLeft>
        </el-aside>
        <el-main class="main">
            <el-container style="height: 100%;overflow: hidden;">
                <el-header class="head">
                    <div class="left">   
                        <el-breadcrumb :separator-icon="ArrowRight">
                            <el-breadcrumb-item>个人交易系统</el-breadcrumb-item>
                            <el-breadcrumb-item>{{ $route.meta.name }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                    <div class="right">
                        <el-button type="primary" class="button" :icon="SemiSelect" :onclick="miniWindow" />
                        <el-button type="primary" v-if="!ismax" class="button" :icon="FullScreen" :onclick="maxWindow" />
                        <el-button type="primary" v-if="ismax" style="transform: rotate(180deg);" class="button" :icon="CopyDocument" :onclick="maxWindow" />
                        <el-button type="primary" class="button" :icon="Close" :onclick="closeWindow" />
                    </div>
                </el-header>

                <el-container class="body" style="overflow-y:auto">
                    <RouterView />
                </el-container>

                <el-footer class="foot">333</el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import sideLeft from '@/components/layout/sideLeft.vue'
import { ref } from 'vue';
import {
    Close, FullScreen, SemiSelect, CopyDocument,ArrowRight
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";

const router = useRouter();

const navigateTo = (routeName: string) => {
    router.push({ name: `${routeName}` });
    console.log(routeName);
}

const ismax = ref(false);

declare global {
    interface Window {
        electronAPI: any;
    }
}

const closeWindow = () => {
    window.electronAPI?.close()
}

const miniWindow = () => {
    window.electronAPI?.minimize()
}

const maxWindow = () => {
    ismax.value = !ismax.value;
    window.electronAPI?.maximize()
}

 
window.electronAPI.onWindowStateChange((event:any, state:string) => {
    if (state === 'maximized') {
        ismax.value = true;
    } else if (state === 'unmaximized') {
        ismax.value = false;
    }
});

</script>

<style scoped>
.mainNotitle {
    overflow: hidden;
}
.mainNotitle .side {
    width: 60px;
    background-color: #177bd0;
    height: 100%;
    -webkit-app-region: drag;
    color: #ffffff;
    font-size: 12px;
    z-index: 1032;
}

.mainNotitle .side .nodrag {
    -webkit-app-region: no-drag;
}

.mainNotitle .side .title {
    padding: 10px;
    font-size: 12px;
    color: #ffffff;
}

 .custom-icon{
    color: #ffffff;
}

.side .image {
    padding: 8px;
    text-align: center;
}

.main {
    background-color: rgb(243, 243, 243);
    border: 1px #E3E3E3 solid;
    border-left: 0px;
    padding: 0px;
}

.main .body {
    padding-left: 3px;
}

.head {
    display: flex;
    justify-content: space-between;
    background-color: rgb(243, 243, 243);
    height: 32px;
    line-height: 32px;
    text-align: right;
    -webkit-app-region: drag;
    padding: 0px;
    padding-left: 5px;
    font-size: 12px;
}

.head .left {
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;
}

.head .right {
    display: flex;
    align-items: center;
}

.head button {
    background-color: rgb(243, 243, 243);
    margin-top: 2px;
    font-size: 14px;
    color: rgb(55, 57, 59);
    -webkit-app-region: no-drag;
    width: 10px;
    border: 0px;
    margin: 0px;
}

.head button:hover {
    background-color: rgb(233, 231, 231);
}

.foot {
    height: 20px;
    line-height: 20px;
    text-align: right;
    padding: 0px;
    padding-left: 5px;
    font-size: 12px;
    background-color: rgb(252, 250, 248);
}
</style>

<style>
  #nprogress .bar {
    background: #177bd0;
    position: fixed;
    z-index: 1031;
    top: 32px;
    left: 60px;
    width: 100%;
    height: 2px;
}
</style>

 